<template>
  <div class="padding-across-10" v-loading="loading" element-loading-text="拼命加载中">
    <div style="padding-top: 5px;padding-bottom: 3px">
    	<headerOpreate :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
    </div>

    <el-table border style="width: 100%;" :data="tableData">
      <el-table-column type="index" align="center"></el-table-column>
       <el-table-column label="书名" align="center" prop="Name"></el-table-column>
       <el-table-column label="条码" align="center" prop="BookBarcode"></el-table-column>
       <el-table-column label="借书时间" align="center" prop="BorrowTime"></el-table-column>
       <el-table-column label="应还时间" align="center" prop="DueTime"></el-table-column>
       <el-table-column label="欠费原因" align="center" prop="DueTime"></el-table-column>
       <el-table-column label="欠费金额" align="center" prop="DueTime"></el-table-column>
       <el-table-column label="状态" align="center" prop="DueTime"></el-table-column>
    </el-table>
    <div class="block" style="text-align:right;margin-bottom:60px;padding-top: 1px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize"
        layout="total,sizes, prev, pager, next, jumper"
        :total="totalSize">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import $ from 'jquery'
  import {GloabFun,HttpServer}from '../../../assets/js/common.js'
  import headerOpreate from '../../../components/headerOpreate'
  let id = 1000;
  var date = new Date();
  export default {
    components:{
      headerOpreate
    },
    data() {
      return {
        loading:false,
        tableData:[],
        multipleSelection:[],
        currentPage:1,
        pageSize:10,
        totalSize:0,
      	opreateDatas:[
          {
            show: true,
            size:"small",
            type:'primary',
            icon:'el-icon-eleg-icon_refresh el-icon--left',
            name:this.$t("message.refresh"),
            action:'reloadDatas'
          }
        ],
      }
    },
    props:{
        templateObj:{
            type: Object,
            default:function(){
              return {};
            }
        }
    },
    methods:{
      executeAction(action){
        if(action){
          this[action]();
        }
      },
      handleCurrentChange(val) {
        this.currentPage=val;
        this.getDatas();
      },
      handleSizeChange(val){
        this.pageSize = val;
        this.getDatas();
      },
      //刷新
      reloadDatas(){

      },
      getDatas(){

      } 
    },
    created(){
    }
  }
</script>
<style scoped lang="less">
  .name{
      color:#20a0ff;
   }
  .el-date-editor.el-input{
    width: 130px;
  }
  .edit-mission{
    padding-top: 50px;
    .el-dialog__header{
      background-color: #000;
    }
    .el-dialog__body{
       position: relative;
     }
    .clearfloat{
       height:100px;
      max-height:150px;
     }
  }
  ._detail{
     width:100%;
     display:block;
     margin-top:15px;
     padding-bottom:10px;
     border: 1px solid #E0E0E0;
     border-radius: 5px;
      .area-header{
          text-align: center;
          font-weight:bold;
          background-color: rgba(32, 159, 255, 0.2);
          border-color: rgba(32, 159, 255, 0.2);
          color: #20a0ff;
          padding: 5px;
          margin-bottom: 5px;
          border-radius: 5px;
        }
        .section:last-child{
        // margin-bottom:20px;
     }
  }
</style>